<template>
	<view class="page qrcode">
		<view class="qrcode-banner">
			<image class="qrcode-banner-bg" src="../../static/bg001.png" mode=""></image>
		</view>
		<view class="qrcode-header">
			<view class="title">智慧楼宇一码通</view>
			<view class="explain">疫情防控，人人有责</view>
		</view>
		<template v-if="isLogin">
			<view class="qrcode-contnet" v-if="userInfo.id_card && userInfo.real_name">
				<view class="userInfo">
					<view class="userName">{{ userInfo.real_name }}</view>
					<view class="cardid">
						<view class="number" v-if="isEyeShow">{{ userInfo.id_card | getCardID }}</view>
						<view class="number big" v-else>{{ '******************'| getCardID }}</view>
						<view class="eye" @click="handleEyeShow">
							<image class="icon" src="../../static/icon/show-icon.png" v-if="isEyeShow" mode=""></image>
							<image class="icon" src="../../static/icon/hide-icon.png" v-else mode=""></image>
						</view>
					</view>
					<view class="refresh" @click="handleLoadQrcode">
						<text>刷新</text>
						<text>|</text>
						<image class="icon" src="../../static/icon/refresh-icon.png" mode=""></image>
					</view>
				</view>
				<view class="codeInfo">
					<view class="codeInfo-time">{{ date }}</view>
					<view class="codeInfo-code">
						<image :src="codeUrl" class="codeInfo-code-image" mode=""></image>
					</view>
					<view class="codeInfo-explain">提示：通行码有效时间1分钟，过期将会自动刷新</view>
				</view>
			</view>
			<view class="qrcode-empty" v-else>
				<view class="qrcode-empty-button" @click="$route('/pages/user/user')">填写个人信息</view>
			</view>
		</template>
		<view class="qrcode-empty" v-else>
			<view class="qrcode-empty-button" @click="$route('/pages/login/login')">授权获取通行码</view>
		</view>
		<view class="qrcode-explain"></view>
		<view class="qrcode-footer">
			<view class="qrcode-footer-title">
				<view class="line"></view>
				<view class="text">本服务联合提供</view>
			</view>
			<view class="qrcode-footer-link">
				<view class="item"></view>
				<view class="item"></view>
				<view class="item"></view>
				<view class="item"></view>
			</view>
			<view class="qrcode-footer-contact">服务热线：0571-80000000</view>
		</view>
	</view>
</template>

<script>
	import qrcode from '@/utils/qrcode.js';
	import getCardID from '@/utils/getCardID.js';
	import {
		getCode
	} from '@/api/qrcode.js';
	export default {
		data() {
			return {
				isEyeShow: true,
				date: '07月15日 14:32:02',
				codeUrl: '',
				codeTask: null
			};
		},
		filters: {
			getCardID(value) {
				console.log("sfz", value)
				if (value) {
					return value.replace(/\s/g, '').replace(/(.{4})/g, '$1 ');
				}
			}
		},
		computed: {
			isLogin() {
				if (this.$store.state.token) {
					return true;
				} else {
					return false;
				}
			},
			userInfo() {
				return this.$store.state.userInfo;
			}
		},
		mounted() {
			this.timer = setInterval(() => {
				//获取时间对象
				var dd = new Date();
				//获取年、月、日、时、分、秒
				//月份要加 1
				//月、日、时、分、秒、用三目运算法判断是否小于等于9，是则在数字前面自动补0，否则不处理
				var y = String(dd.getFullYear());
				var m = String(dd.getMonth() + 1 <= 9 ? '0' + (dd.getMonth() + 1) : dd.getMonth() + 1);
				var d = String(dd.getDate() <= 9 ? '0' + dd.getDate() : dd.getDate());
				var h = String(dd.getHours() <= 9 ? '0' + dd.getHours() : dd.getHours());
				var i = String(dd.getMinutes() <= 9 ? '0' + dd.getMinutes() : dd.getMinutes());
				var s = String(dd.getSeconds() <= 9 ? '0' + dd.getSeconds() : dd.getSeconds());
				var wkday = dd.getDay(); //获取今天是星期几
				var time = m + '月' + d + '日 ' + h + ':' + i + ':' + s;
				this.date = time;
			}, 1000);
		},
		onShow() {
			this.handleLoadQrcode();
			this.codeTask = setInterval(() => {
				this.handleLoadQrcode();
			}, 120000);
		},
		onHide() {
			clearInterval(this.codeTask);
		},
		methods: {
			/**
			 * 展示
			 */
			handleEyeShow() {
				if (this.isEyeShow) {
					this.isEyeShow = false
				} else {
					this.isEyeShow = true
				}
			},
			/**
			 * 获取二维码
			 */
			handleLoadQrcode() {
				if (this.isLogin) {
					getCode().then(response => {
						const {
							data
						} = response;
						if (data.content) {
							this.codeUrl = qrcode.drawImg(data.content);
						}
					});
				}
			}
		}
	};
</script>

<style lang="scss">
	.page.qrcode {
		position: relative;
		padding: 0;
		margin: 0;

		.qrcode-banner {
			position: absolute;
			left: 0;
			top: 0;
			width: 750rpx;
			height: 750rpx;
			display: flex;
			align-items: center; //垂直居中
			justify-content: center; //水平居中
			background: linear-gradient(0deg, #f1f1f1 14%, #f1f1f1 29%, #3c77c8 47%, #3875c6 97%, #3875c6 97%);

			.qrcode-banner-bg {
				width: 80%;
				margin-top: -100rpx;
				opacity: 0.6;
			}
		}

		.idCode-image {
			width: 300rpx;
			height: 300rpx;
		}

		.qrcode-header {
			position: relative;
			z-index: 100;
			padding-top: 150rpx;
			display: flex;
			align-items: center; //垂直居中
			justify-content: center; //水平居中
			flex-flow: column;

			.title {
				font-size: 70rpx;
				color: #eeeeee;
				font-weight: 800;
			}

			.explain {
				font-size: 28rpx;
				font-weight: 400;
				color: #eeeeee;
				padding-top: 20rpx;
			}
		}

		.qrcode-empty {
			position: relative;
			z-index: 100;
			min-height: 500rpx;
			margin: 60rpx;
			padding-top: 300rpx;

			.qrcode-empty-button {
				box-shadow: 0 5px 10px -5px rgba(0, 0, 0, 10%);
				border-radius: 15rpx; //圆角
				height: 80rpx;
				background-color: #356fff;
				text-align: center;
				line-height: 80rpx;
				color: #f1f1f1;
			}
		}

		.qrcode-contnet {
			position: relative;
			z-index: 100;
			margin: 60rpx;
			box-shadow: 0 5px 10px -5px rgba(0, 0, 0, 10%);
			border-radius: 15rpx; //圆角
			background-color: #356fff;

			.userInfo {
				padding: 20rpx;
				position: relative;

				.userName {
					font-size: 40rpx;
					font-weight: bold;
					color: #ffffff;
					line-height: 60rpx;
				}

				.cardid {
					font-size: 30rpx;
					font-weight: 400;
					color: #c0d9f4;
					line-height: 60rpx;
					display: flex;
					align-items: center; //垂直居中
					justify-content: flex-start; //水平居左

					.number {
						font-size: 30rpx;
						font-weight: 400;
						color: #c0d9f4;
					}
					.big {
						font-size: 44rpx;
					}

					.eye {
						height: 60rpx;
						display: flex;
						align-items: center; //垂直居中
						justify-content: flex-start; //水平居左
					}

					.icon {
						width: 38rpx;
						height: 38rpx;
						margin-left: 20rpx;
					}
				}

				.refresh {
					position: absolute;
					right: 30rpx;
					top: 35rpx;
					display: flex;
					align-items: center; //垂直居中
					justify-content: flex-end; //水平居中
					font-size: 28rpx;
					font-weight: 400;

					text {
						color: #c0d9f4;
						margin-left: 16rpx;
					}

					.icon {
						width: 30rpx;
						height: 30rpx;
						margin-left: 16rpx;
					}
				}
			}

			.codeInfo {
				border-radius: 15rpx; //圆角
				background: #ffffff;
				width: 100%;

				.codeInfo-code {
					width: 400rpx;
					height: 400rpx;
					margin: 40rpx auto;
				}

				.codeInfo-time {
					padding-top: 40rpx;
					width: 100%;
					text-align: center;
					font-size: 60rpx;
					line-height: 80rpx;
				}

				.codeInfo-code-image {
					width: 100%;
					height: 100%;
				}

				.codeInfo-explain {
					margin: 20rpx;
					border-top: 1px solid #eeeeee;
					line-height: 60rpx;
					font-size: 24rpx;
					color: #8b8e93;
				}
			}
		}

		.qrcode-footer-title {
			margin: 30rpx 40rpx;
			height: 40rpx;

			.text {
				background-color: #f1f1f1;
				position: relative;
				margin: 0 auto;
				width: 240rpx;
				text-align: center;
				margin-top: -25rpx;
				color: #8b8e93;
				font-size: 28rpx;
			}

			.line {
				border: 1rpx solid #e3e3e3;
			}
		}

		.qrcode-footer-contact {
			text-align: center;
			color: #8b8e93;
		}
	}
</style>
